<template>
  <section>
    <search-box>
      <div class="flex-row-reverse">
        <el-button type="primary" @click="FnOpenGood('create')" :disabled="FnBtnDisabled('eks_2_createBmsGoods')">新增裸金属商品</el-button>
        <el-button type="text" @click="FnGetBmsGoodsList">
          <i class="el-icon-refresh" style="font-size: 20px"></i>
        </el-button>
      </div>
    </search-box>
    <el-table :data="goodsList" border>
      <el-table-column prop="goods_id" min-width="80" label="商品id"></el-table-column>
      <el-table-column prop="goods_name" min-width="150" label="商品名称"></el-table-column>
      <el-table-column prop="bms_goods_id" min-width="120" label="裸金属商品id"></el-table-column>
      <el-table-column prop="bms_goods_name" min-width="150" label="裸金属商品名称"></el-table-column>
      <el-table-column prop="gpu" min-width="120" label="gpu数量"></el-table-column>
      <el-table-column prop="gpu_type_id" min-width="120" label="gpu标签">
        <template #default="{row}">
          {{ row.gpu_type ? row.gpu_type : '-'}}
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="备注信息">
        <template #default="{row}">
          {{ row.remark ? row.remark : '-'}}
        </template>
      </el-table-column>
      <el-table-column min-width="180" label="操作">
        <template #default="scope">
          <el-button 
            type="text"
            @click="FnOpenGood('edit',scope.row)"
            :disabled="FnBtnDisabled('eks_2_bmsGoodsEdit')">修改</el-button>
          <el-button 
            type="text"
            @click="FnDeleteGood(scope.row)"
            :disabled="FnBtnDisabled('eks_2_bmsGoodsDelete')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   
  </section>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { authBtnDisabled } from '@/utils/auth.js'
import searchBox from '@/components/search-box.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import  bmsService from '@/service/eks/bmsgood.js'

const route = useRoute()
const router = useRouter()
const FnBtnDisabled = (key) => {
  return authBtnDisabled(key, route.meta.name)
}
const goodsList = ref([])

const FnGetBmsGoodsList = () => {
  bmsService.getBmsGoods().then(res => {
    if(res.code === 'Success') {
      goodsList.value = res.data ? res.data : []
    }
  })
}
FnGetBmsGoodsList()

const FnOpenGood = (type, row) => {
  if(type === 'create') {
    router.push({name: 'eks_2_bmsGoods_create'})
  } else if(type === 'edit') {
    router.push({
      name: 'eks_2_bmsGoods_edit',
      params: {
        id: row.goods_id
      }
    })
  }
}


const FnDeleteGood = (row) => {
  ElMessageBox.confirm(
    '是否删除当前裸金属商品？',
    '提示',
    {
      confirmButton: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    bmsService.deleteGoods({goods_id: row.goods_id}).then(res => {
      if(res.code === 'Success') {
        ElMessage.success('删除成功')
        FnGetBmsGoodsList()
      }
    })
  }).catch(() => {})
}
</script>

<style>

</style>